<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>忽悠你——留言板</title>
    <link rel="stylesheet" href="style/1.css" type="text/css"></link>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css">
        #zhe {
            width: 100%;
            height: 100%;
            position: fixed;
            margin: 0px auto;
            display: none;
            z-index: 66666;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
        }

        .table2 {
            background-color: papayawhip;
        }

        .table2 td:first-of-type {
            color: blueviolet;
        }

        .zhetable {
            width: 100%;
            text-align: center;
        }

        .zhetable td{
            height: 30px;
        }

        #main{
            width: 200px;
            margin: 0px auto;
            text-align: center;
            background-color: #00A8FF;
        }
    </style>
</head>
<body>

<div id="zhe">
    <div id="main">
        <h2>当前在线用户</h2>
        <table class="zhetable" align="center" border="0" cellpadding="0" cellspacing="0">
            <c:forEach items="${applicationScope.adminSet}" var="u">
                <tr>
                    <td>
                            ${u.uname}
                    </td>
                </tr>
            </c:forEach>
            <td>
                <input type="button" class="close" value="关闭"/>
            </td>
        </table>
    </div>

</div>

<h1 id="header"><a href="/">HYN—GuestBook</a></h1>
<p id="sideBar">

    当前在线人数:&emsp;${applicationScope.adminSet.size()}&emsp;人&emsp;
    <input type="button" class="nowuser" value="点我查看当前在线用户"/>

    <c:choose>
        <c:when test="${not empty sessionScope.admin}">
            <a>你好,${sessionScope.admin.uname}!</a>
            <a href="LoginOut">注销</a>
        </c:when>

        <c:otherwise>
            <a href='reg.html'>注册</a><a href='login.html'>登陆</a>
        </c:otherwise>
    </c:choose>

</p>
<ul id="contentList">

    <c:forEach items="${requestScope.liuYanList}" var="l">
        <c:remove var="bianji"/>
        <c:if test="${l.admin.uname eq sessionScope.admin.uname}">
            <c:set var="bianji" value="编辑"/>
        </c:if>

        <li>
            <h3>
                标题：<span style="color: blue;font-weight:bolder">${l.title}</span>
                留言人姓名：<span style="color: red;font-weight:bolder">${l.admin.uname}</span>
                留言时间：<span>${l.createdate}</span>

                <span><a href="bianji.jsp?lid=${l.lid}&&title=${l.title}&&context=${l.context}"
                         style="font-weight:bold">${bianji}</a></span>
                <span><a href="reply.jsp?lid=${l.lid}" style="font-weight:bold"
                         class="hui">回复</a></span>


            </h3>
            <div>
                    ${l.context}

            </div>


            <div class="hui" style="display: none;">
                <table class="table2">
                    <c:forEach items="${requestScope.huiFuList}" var="h">
                        <c:if test="${l.lid eq h.liuYan.lid}">
                            <tr>
                                <td>
                                        ${h.admin.uname}:
                                </td>
                                <td>
                                        ${h.context}
                                </td>
                                <td>
                                        ${h.createdate}
                                </td>
                            </tr>
                        </c:if>
                    </c:forEach>

                </table>
            </div>
            <input type="button" class="chakan" value="查看回复" style="cursor: pointer">

        </li>

    </c:forEach>


    <h3 class="page">
        第${requestScope.pageIndex}页/共${requestScope.pageSize}页
        <a href="LiuYanListServlet?pageIndex=1">首页</a> ||


        <a href="LiuYanListServlet?pageIndex=${requestScope.pageIndex-1}">上一页</a>


        <a href="LiuYanListServlet?pageIndex=${requestScope.pageIndex+1}">下一页 </a>||


        <a href="LiuYanListServlet?pageIndex=${requestScope.pageSize}">末页 </a>
    </h3>

</ul>
<form id="fm1" action="LiuYanServlet" method="post">
    <h3><a href="#">Top</a>发表留言</h3>
    <label>留言标题：<input type="text" name="title"/></label>
    <label>您的姓名：<input type="text" name="username" value="${sessionScope.admin.uname}" readonly="readonly"/></label>
    <label>留言内容：<textarea name="context"></textarea></label>
    <input type="submit" value="" id="submitButton"/>
</form>
</body>
<script type="text/javascript">
    $(function () {
        $(".chakan").click(function () {
            if ($(this).val() == "查看回复") {
                $(this).val("收起回复");
            } else {
                $(this).val("查看回复");
            }
            $(this).prev().toggle();
        })


        $(".nowuser").click(function () {
            $("#zhe").attr("style","display:flex");
        })
        $(".close").click(function () {
            $("#zhe").attr("style","display:none");
        })
    })
</script>
</html>